<template>
  <div class="flex ml-2">
    <a-card class="flex-1 flex flex-col overflow-auto" :body-style="{ height: '100%' }">
      <div class="w-1/3 mx-auto flex flex-col justify-center">
        <div class="text-center font-semibold text-sm">模板</div>
        <a-divider class="my-2" style="background-color: var(--primary-color)" />
      </div>
      <a-input v-model:value="searchVal" placeholder="模板名称/助记码" />
      <a-spin :spinning="loading" class="flex-1 flex overflow-auto">
        <a-directory-tree
          v-if="treeData.length"
          v-model:selected-keys="selectedKeys"
          default-expand-all
          :tree-data="treeData"
          class="flex-1 overflow-hidden overflow-x-auto mt-2"
          :field-names="{
            children: 'subList',
            title: 'code'
          }"
        >
          <template #icon="{ parentCode, nodeType }">
            <!-- nodeType 节点类型 0:模板内容 1:模板分类 -->
            <FunnelPlotOutlined v-if="parentCode === '0'" />
            <template v-else>
              <img v-if="nodeType === 0" :src="IconDocument" width="14" class="pb-1" />
              <img v-else :src="IconDirectory" width="14" class="pb-1" />
            </template>
          </template>
          <template #title="item">
            <div class="inline-flex justify-between items-center w-full" @click="onSelectTemplate(item)" @mouseover="onMouseOver(item)">
              <div class="mr-2 truncate w-40" :title="item.name">{{ item.name }}</div>
              <div class="flex items-center">
                <a-space>
                  <!-- 编辑 -->
                  <a-button v-if="item.nodeType === 0 && mouseOverItem.code === item.code" type="text" size="small" @click.stop="onSelectTemplate(item)"
                    >选择</a-button
                  >
                </a-space>
              </div>
            </div>
          </template>
        </a-directory-tree>
        <a-empty v-else class="w-full h-full" />
        <div class="mt-2 h-[500px]">
          <a-form ref="formRef" class="flex-1" :model="formState" :colon="false" :label-col="{ style: { width: '70px' } }">
            <a-form-item label="检查方法" name="content1">
              <a-textarea v-model:value="formState.content1" :rows="4" placeholder="" />
            </a-form-item>
            <a-form-item label="检查所见" name="content2">
              <a-textarea v-model:value="formState.content2" :rows="4" placeholder="" />
            </a-form-item>
            <a-form-item label="诊断意见" name="content3">
              <a-textarea v-model:value="formState.content3" :rows="4" placeholder="" />
            </a-form-item>
          </a-form>
        </div>
      </a-spin>
    </a-card>
  </div>
</template>
<script setup>
import { message } from 'ant-design-vue'
import IconDocument from '@/assets/icons/icon-document.svg'
import IconDirectory from '@/assets/icons/icon-directory.svg'
import userStore from '../../store'

const store = userStore()

const searchVal = ref('')
const loading = ref(false)
const treeData = ref([])
const selectedKeys = ref([])
const formState = ref({})
const mouseOverItem = ref({})
const getData = async () => {
  const { data, code } = await post('/ris/template/getTemplateCategoryList', { categoryCode: store.searchData.categoryCode, searchWord: searchVal.value })
  if (code === 0) {
    treeData.value = data || []
  }
}
const onMouseOver = (item) => {
  mouseOverItem.value = item
}
const onSelectTemplate = async (item) => {
  const { msg, data, code } = await post('/ris/template/getRisTemplateContent', {
    data: item.code
  })
  if (code !== 0) {
    formState.value = {}
    return message.error(msg)
  }
  formState.value = data || {}
}
watch(
  () => store.currentPatient,
  (val) => {
    if (val.brId) {
      getData()
    }
  }
)
</script>
<style lang="less" scoped>
.icon-color {
  color: var(--primary-color);
}
:deep(.ant-spin-container) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
:deep(.ant-tree) {
  .ant-tree-list {
    height: 100%;
    overflow: auto;
  }
  .ant-tree-switcher {
    width: 16px !important;
  }
}
:deep(.ant-tree-indent-unit) {
  width: 16px !important;
}
:deep(.ant-tree-treenode) {
  display: flex;
  width: 100%;
  padding: 8px 0;
  button:not(.ant-btn-dangerous) {
    color: var(--primary-color);
  }
  .ant-tree-node-selected {
    button:not(.ant-btn-dangerous) {
      color: #fff;
    }
  }

  &:before {
    bottom: 0 !important;
  }
  .ant-tree-node-content-wrapper {
    display: flex;
    align-items: center;
    .ant-tree-title {
      flex: 1;
    }
  }
}

.radio-style {
  display: flex;
  :deep(.ant-radio-button-wrapper) {
    // width: 33.3%;
    flex: 1;
    padding: 0;
    text-align: center;
  }
}
</style>
